<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" title="补差价" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="detaill_title first">订单详情</div>
    <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item label="订单编号">{{orderInfo ? orderInfo.number : ''}}</el-descriptions-item>
      <el-descriptions-item label="订单已支付金额">{{orderInfo ? orderInfo.payPrice : ''}}</el-descriptions-item>
      <el-descriptions-item label="差额" v-if="orderInfo.supFlag == 1">{{orderInfo ? orderInfo.shortfall : '' }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <dict-tag :options="dict.type.jieke_order_status" :value="orderInfo.status" />
      </el-descriptions-item>
      <el-descriptions-item label="支付方式">
        <dict-tag :options="dict.type.jieke_payment_method" :value="orderInfo.paymentMethod" />
      </el-descriptions-item>
      <el-descriptions-item label="是否返洗">
        {{orderInfo.toBackId ? '是' : '否'}}
      </el-descriptions-item>
    </el-descriptions>
    <div class="detaill_title">
      <div class="title">订单商品</div>
      <el-button size="medium" class="addbtn" type="primary" @click="addGoods">添加商品</el-button>
    </div>
    <el-table :border="true" :data="orderGoods">
      <el-table-column label="商品ID" width="120" align="center" prop="id"></el-table-column>
      <el-table-column label="商品名称" align="center" prop="title"></el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.image" fit="cover"></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" prop="price"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <div class="flex_item">
        <div class="text">补差价金额：{{differencePrice}}</div>
        <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </template>
    <GoodChoose v-if="goodChooseVisible" ref="goodChoose" @getValue="getValue"></GoodChoose>
  </el-dialog>
</template>

<script>
import { getOrder, updateOrderGoods, orderGoodsRemove } from "@/api/order/order";
import debounce from 'lodash/debounce'
import GoodChoose from '../goods/good-choose.vue'  //选择商品的弹窗
export default {
  dicts: ['jieke_order_status', 'jieke_payment_method', 'jieke_order_type', 'jieke_order_urgent', 'jieke_ordersales_status'],
  data() {
    return {
      visible: false, //弹窗是否显示
      confirmLoading: false, //确认按钮loading
      id: '', //上个页面传过来的订单id
      orderGoods: [], //商品列表
      orderInfo: {}, //订单信息
      goodChooseVisible: false, //选择商品的弹窗是否显示
      differencePrice: 0, //补差价的金额
    }
  },
  components: {
    GoodChoose, //选择商品的弹窗
  },
  methods: {
    init() {
      this.visible = true
      this.confirmLoading = false
      this.differencePrice = 0
      this.getInfo()
    },
    // 获取订单详情
    getInfo() {
      getOrder(this.id).then(response => {
        this.orderInfo = response.data;
        this.orderGoods = response.data.orderGoods
      });
    },
    // 删除订单商品
    deleteHandle(row, index) {
      this.orderGoods.splice(index, 1);
      console.log(row)
      this.differencePrice = (this.differencePrice * 100 - row.price * 100) / 100
      if (row.goodsId) {
        // 请求删除的接口
        orderGoodsRemove([row.id]).then((res) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$modal.msgSuccess("操作成功");
        })
      }
    },
    // 添加商品，弹出选择商品的弹窗
    addGoods() {
      this.goodChooseVisible = true
      this.$nextTick(() => {
        this.$refs.goodChoose.init()
      })
    },
    // 选择商品弹窗后选重的商品
    getValue(val) {
      let newarr = this.orderGoods.concat(val)
      let allPrice = 0
      val.map((item) => {
        allPrice = (allPrice * 100 + item.price * 100) / 100
      })
      this.differencePrice = allPrice
      this.orderGoods = newarr
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      if (this.differencePrice < 0) {
        this.$modal.msgError("差价为负，请联系用户操作退款并重新下单");
        return
      }
      let datas = []
      // 提交选重的商品，如果该条数据含有goodsId，代表是原订单的商品，提交的时候只提交选择的商品，不提交原有的商品
      this.orderGoods.map((item) => {
        if (!item.goodsId) {
          datas.push(
            {
              id: item.id,
              price: item.price,
            }
          )
        }
      })
      let data = {
        orderId: this.id,
        addOrderGoods: datas
      }
      this.confirmLoading = false
      updateOrderGoods(data).then((res) => {
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.$modal.msgSuccess("操作成功");
        this.confirmLoading = false
        this.visible = false
        this.$emit('refresh')
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
.detaill_title {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
  display: flex;
  &.first {
    margin-top: 0;
  }
  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #1890ff;
    border-radius: 2px;
    margin-right: 10px;
    position: relative;
    top: 3px;
  }
  .title {
    flex: 1;
  }
}
.flex_item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .text {
    margin-right: 30px;
    color: #f56c6c;
  }
}
</style>
